<template>
  <div class="container">
    <div class="pro-menu">
      <div class="menu-header">全部分类</div>
      <el-menu
      class="el-menu-vertical-demo"
      :unique-opened = "true"
      :default-active="active"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose">
        <el-submenu  v-for="(item,index) in classList" :index="index = (index+1)" >
          <template slot="title" >
            <!-- <i class="el-icon-location"></i> -->
            <span>{{item.tradeName}}</span>
          </template>
          <el-menu-item  v-for="(v,index1) in item.list" @click="routeToPath('/help/detail?active='+(index+'-'+index1)+'&Id='+v.id, 'current');"  :index="index+'-'+index1" >{{v.tradeName}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
  import {getSelectPcList} from '@/api/news';

export default {
  name: 'Menu',
  components: {

  },
  data() {
    return {
       classList:[],
       isCollapse: false,
       openeds:['0'],
       active:'0',
    }
  },
  created() {
    this.active = 0;
    var active = this.$route.query.active;
    if(active !=undefined && active != null){
      this.active = active;
    }
    this.getPcList();
  },
  methods: {
    //类目列表
    getPcList(){
      getSelectPcList().then(res =>{
          this.classList = res.data;
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="scss">
.pro-menu{
  width: 220px;
  margin: 20px 0;
  .menu-header{
    width: 200px;
    height: 48px;
    line-height: 48px;
    background: #E9E9E9;
    border-radius: 10px 10px 0 0;
    padding-left: 20px;
  }
}
.el-menu-item-group{
  .el-menu-item-group__title{
    display: none;
  }

}
.el-menu{
  border-right: none;
}
</style>
